<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link rel="stylesheet" type="text/css" href="__STATIC__/index/css/style.css"/>
    <script type="text/javascript" src="__STATIC__/index/js/rem.js"></script>
    <title>评价</title>
</head>
<body>
<div class="order_comment">
    <!--评价星星-->
    <div class="comment_star">
        <span class="smoth super-text bold">综合评价</span>
        <p class="star">
            <i class="select"></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
        </p>
    </div>
    <!--评价标签-->
    <div class="comment_label">
        <ul class="clear label_list normall-text">
            {foreach $com as $v}
            <li><p>{$v}</p></li>
            {/foreach}
        </ul>
    </div>
    <!--评价内容-->
    <div class="comment_content">
        <p class="bold smoth super-text">评价内容</p>
        <textarea name="content" id="content" placeholder="亲，您对这个商品还满意吗，您的评价会帮助我们选择更好的商品哦~"></textarea>
    </div>
    <!--上传图片-->
    <div class="comment_upload">
        <form class="license_form">
            <p class="smoth super-text bold">上传相关图片</p>
            <div class="result" id="result">
                <div class="default_img">
                    <img class="auto-img hoverImg" src="__STATIC__/index/img/licenese.png"/>
                    <input class="topPhoto" type="hidden" name="licence" id="topPhoto"/>
                </div>
            </div>
        </form>
        <!--提交-->
        <button class="submit">确认提交</button>
    </div>
</div>
<script type="text/javascript" src="__STATIC__/index/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="__STATIC__/index/js/layer/mobile/layer.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

<script type="text/javascript">
    var index=0;
    //综合评价星星点击
    $('.star i').each(function () {
        $(this).click(function () {
            index = $(this).index();
            for (var i = 0; i < index + 1; i++) {
                $('.star i').eq(i).addClass('select').nextAll().removeClass('select');
            }
        })
    })
    //选择评价标签
    $('.comment_label li p').on('click', function () {
        if ($(this).hasClass('on')){
            $(this).removeClass('on')
        }else {
            $(this).addClass('on')
        }
    })

    //定义上传图片张数
    var imgcount = 0;
    // JSSDK 配置参数
    wx.config({$jsSign|raw});
    // JSSDK 初始化成功
    wx.ready(function () {
        $('.default_img').click(function () {
            var localIds = [];
            wx.chooseImage({
                count: (3 - imgcount), // 默认9
                sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                success: function (res) {
                    localIds = res.localIds;
                    syncUpload();
                }
            });

            function syncUpload() {
                if (!localIds.length) {
                    // alert('上传成功!');
                } else {
                    var localId = localIds.shift();
                    wx.uploadImage({
                        localId: localId,
                        success: function (res) {
                            // alert(localId);
                            $('.default_img').before('<div class="remove_img" id="remove_img"><i class="close"></i><img class="auto-img" togy="' + res.serverId + '" src="' + localId + '" /></div>');
                            imgcount++;
                            if (imgcount > 2) {
                                $('.default_img').hide();
                            }
                            syncUpload();
                        }
                    });
                }
            }
        });
    });

    $('.result').on('click', '.close', function () {
        $(this).parents('.remove_img').remove();
        imgcount--;
        if (imgcount < 3) {
            $('.default_img').css({'display': 'inline-block'});
        }
    });


    //点击提交按钮
    $('.submit').on('click', function () {
        if (!$('.star i').hasClass('select')) {
            layer.open({
                content: '综合评价不可以为空',
                skin: 'msg',
                time: 2
            })
        } else {
            var thumb = '';
            $('.remove_img').each(function () {
                thumb+='|'+$(this).children('img').attr('togy');
            });
            // alert(index+1);
            var tags = '';
            $('.comment_label li p[class="on"]').each(function () {
                if(tags==''){
                    tags+=$(this).text();
                }else {
                    tags+=','+$(this).text();
                }
            })
            layer.open({
                content:'确定要提交吗？',btn:['确定','取消'],yes:function () {
                    $.ajax({
                        url:'',
                        type:'post',
                        data:{id:'{$order.id}',star:index+1,content:$('#content').val(),thumb:thumb.substr(1),tags:tags},
                        success:function (res) {
                            if(res.code=='ok'){
                                window.location.replace('comment_success');
                            }else {
                                layer.open({
                                    content: '提交失败，请稍后重试！',
                                    skin: 'msg',
                                    time: 2
                                })
                            }
                        }
                    })
                }
            })


            // window.location.href = 'comment_success.html'
        }
    })
</script>
</body>
</html>